<template>
	<view class="challenge">
		<view class="header">

		</view>
		<view class="challenge-top">
			<!-- 答题卡 -->
			<view class="answerSheet challenge-top-item">
				<image class="answerSheet-img challenge-top-img-item"
					src="https://wlsy.nanjingyunpeng.cn/weixin/image/chall1.png"></image>
				<view class="answerSheet-text answerSheet-text-center">
					答题卡
				</view>
			</view>
			<!-- 计时 -->
			<view class="timing challenge-top-item">
				<image class="timing-img challenge-top-img-item"
					src="https://wlsy.nanjingyunpeng.cn/weixin/image/chall2.png"></image>
				<view class="timing-text answerSheet-text-center">
					{{ ti }}
				</view>
			</view>
			<!-- 立即交卷 -->
			<view class="immediately challenge-top-item">
				<image class="immediately-img challenge-top-img-item"
					src="https://wlsy.nanjingyunpeng.cn/weixin/image/chall3.png">
				</image>
				<view class="immediately-text answerSheet-text-center" @click="LJSubAnswer">
					立即交卷
				</view>
			</view>

		</view>
		<!-- 答题区域 -->
		<view class="problem">
			<view class="title">
				<view class="shu"></view>
				<view class="title-text">单选题</view>
			</view>
			<!-- 题目 -->
			<view class="answerArea">
				<view class="answerArea-title">
					{{ dataList[topicIndex].question }}:（）
				</view>
				<view class="select-options">
					<view class="select-options-one"
						:class="[ (options_index == index && dataList[topicIndex].change) ? 'btned' :'',
					dataList[topicIndex].use && dataList[topicIndex].use == item ? ( dataList[topicIndex].use == dataList[topicIndex].answer ? 'dui' : 'wrong') : '']"
						v-for="(item,index) in dataList[topicIndex].options" :key="index"
						@click="selectOptionone(item,index)">
						{{options[index]}}：{{ item }}
					</view>
				</view>

			</view>
		</view>
		<!-- 做题选择按钮 -->
		<view class="selectBtns">
			<!-- 上一题 -->
			<view class="Last">
				<button class="lastBtn btns" v-show="topicIndex > 0" @click="lastSelect">上一题</button>
			</view>
			<!-- 题数 -->
			<view class="topicNum">
				<image class="challenge-top-img-item" src="https://wlsy.nanjingyunpeng.cn/weixin/image/chall1.png">
				</image>
				<view class="topicNue-item">
					{{ topicIndex + 1 }}/{{ topicSum }}
				</view>
			</view>
			<!-- 确认答案/下一题/交题 -->
			<view class="btnSet">
				<button class="confirmY btns" v-show="options_index === null && !dataList[topicIndex].use">确认答案</button>
				<button class="confirmN btns" v-show="options_index !== null" @click="okAnser">确认答案</button>
				<button class="next btns confirmN"
					v-show="topicIndex + 1 != dataList.length && dataList[topicIndex].use"
					@click="nextSelect">下一题</button>
				<button class="subtopic btns confirmN"
					v-show="topicIndex + 1 == dataList.length && dataList[topicIndex].use"
					@click="gotoAnswerResult">交卷</button>
			</view>

		</view>
		<view class="footer">
			<image class="footerimg" src="https://wlsy.nanjingyunpeng.cn/weixin/image/footerImg.png"></image>
		</view>
	</view>
</template>

<script>
	import {
		questionList,
		writequestionlogs
	} from "../../api/api.js"
	import {
		data
	} from "../../uni_modules/uview-ui/libs/mixin/mixin.js"
	const audio = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				current: {
					srcCorrect: '../../static/audio/correct.mp3',
					srcWrong: '../../static/audio/wrong.mp3',
				},
				isYVisible: true,
				isNVisible: false,
				ti: '00:00:00',
				timer: '',
				hour: 0,
				minutes: 0,
				seconds: 0,
				dataList: [],
				topicSum: 0, //所有题的总数
				topicIndex: 0, //当前题号
				flag: true, //控制未选题 确认答题按钮
				okFlag: false, //控制确认答题按钮
				lastFlag: false, //上一题
				xiaFlage: false, //控制下一题按钮
				subFlag: false, //控制提交按钮
				currIndex: 0, //当前题的index
				currAnser: "", //当前题目的答案
				currOption: "", //当前选项
				duiCss: 0,
				cuoCss: 0,
				questionlogs: [], //答案集合
				selectOptions: "", //每个的选项
				duiNum: 0, //答对
				cuoNum: 0, //答错
				undeNum: 0, //未做
				zhezhao: false, //控制选项不可选
				dataListIndex: {}, //当前数据
				options_index: null, //选项位数。选的第几个
				options: ['A', 'B', 'C', 'D'],

			}
		},
		onLoad() {
			this.questionList()
			this.begin()
		},
		destroyed() {
			clearInterval(this.timer);
		},
		methods: {
			//获取题目列表
			async questionList() {
				let res = await questionList()
				// console.log("答题列表", res)
				if (res.code == 1000) {
					res.data.forEach((item, index) => {
						this.dataList.push({
							id: item.id,
							question: item.question,
							use: '',
							use2: '',
							options: [item.optiona, item.optionb, item.optionc, item.optiond],
							change: true,
							answer: item.answer,
						})
					})
					// console.log(this.dataList)
					this.topicSum = this.dataList.length
				}
			},


			selectOptionone(item, index) {
				if (!this.dataList[this.topicIndex].change) return
				this.options_index = index
			},
			//确认答案
			okAnser() {
				this.dataList[this.topicIndex].use = this.dataList[this.topicIndex].options[this.options_index]
				this.dataList[this.topicIndex].use2 = this.options[this.options_index]
				this.options_index = null;
				this.dataList[this.topicIndex].change = false
				this.$forceUpdate()
				audio.src =this.dataList[this.topicIndex].use==this.dataList[this.topicIndex].answer ? "/static/audio/correct.mp3" : "/static/audio/wrong.mp3";
				audio.play();

			},
			//下一题
			nextSelect() {
				this.topicIndex += 1
				this.$forceUpdate()
			},
			//上一题
			lastSelect() {
				this.topicIndex -= 1
				this.$forceUpdate()
			},
			//立即交卷
			async LJSubAnswer() {
				console.log("this.topicIndex", this.topicIndex)
				if (this.topicIndex + 1 != this.dataList.length) {
					uni.showModal({
						title: '提示',
						content: '答题还未完成确定交卷？',
						success: (res) => {
							if (res.confirm) {
								// console.log('用户点击确定');
								this.gotoAnswerResult();
							} else if (res.cancel) {
								// console.log('用户点击取消');
							}
						}
					});
				}
			},
			//提交
			async gotoAnswerResult() {
				let status = 0
				if (this.questionlogs.length == this.topicSum) {
					status = 1
				} else {
					status = 0
				}
				let fen = parseInt(this.ti.substring(4, 5))
				let miao = parseInt(this.ti.substring(6))
				let question_time = ""
				if (this.ti == 0) {
					question_time = miao + "秒"
				} else {
					question_time = fen + "分" + miao + "秒"
				}

				let arr = []
				let duiNum = 0
				let cuoNum = 0
				this.dataList.forEach(item => {
					if (item.use) {
						item.use == item.answer ? duiNum++ : cuoNum++
						arr.push({
							id: item.id,
							type: item.use == item.answer ? 1 : 0,
							select: item.use2,
						})
					}
				});
				// console.log("question_time", question_time)
				let res = await writequestionlogs({
					question_json: JSON.stringify(arr),
					status: status,
					question_time: question_time
				})
				if (res.code == 1000) {
					// console.log("提交答题", res)
					let id = res.data

					uni.navigateTo({
						url: `/pages/detail/AnswerResult?dui=${duiNum}&cuo=${cuoNum}&time=${question_time}&zong=${this.dataList.length}&status=${status}&id=${id}`
					});
				}

			},

			begin() {
				this.timer = setInterval(this.startTimer, 1000);
			},
			startTimer() {
				this.seconds += 1;
				if (this.seconds >= 60) {
					this.seconds = 0;
					this.minute = this.minute + 1;
				}

				if (this.minute >= 60) {
					this.minute = 0;
					this.hour = this.hour + 1;
				}
				this.ti = (this.hour < 10 ? '0' + this.hour : this.hour) + ':' + (this.minutes < 10 ? '0' + this.minutes :
					this.minutes) + ':' + (this.seconds < 10 ? '0' + this.seconds : this.seconds);
			},

		},

	}
</script>

<style scoped lang="scss">
	.challenge {
		min-width: 100%;
		min-height: 100%;
		background-color: #EEF7FE;
		padding: 30rpx;
		padding-top: 70rpx;
		box-sizing: border-box;

		.header {
			width: 750rpx;
			height: 40rpx;
			background: #466EE7;
			border-radius: 0rpx 0rpx 60rpx 60rpx;
			position: fixed;
			top: 0;
			left: 0;
		}

		.challenge-top {
			width: 690rpx;
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			opacity: 1;
			padding-left: 35rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;

			.challenge-top-item {
				width: 216rpx;
				height: 88rpx;
				display: flex;
				align-items: center;

				.challenge-top-img-item {
					width: 48rpx;
					height: 48rpx;
				}

				.answerSheet-text-center {
					margin-bottom: 5rpx;
				}
			}
		}

		.problem {
			width: 690rpx;
			height: auto;
			background: #FFFFFF;
			box-shadow: 0px 2rpx 8rpx 0px rgba(51, 51, 51, 0.05);
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			opacity: 1;
			margin-top: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;

			.title {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.shu {
					width: 8rpx;
					height: 28rpx;
					background: linear-gradient(1deg, #688EFA 0%, #466EE7 100%);
					border-radius: 200rpx 200rpx 200rpx 200rpx;
					opacity: 1;
					margin-right: 8rpx;
				}

				.selectOptions {}

				.title-text {
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 38rpx;
				}
			}

			.select-options {
				margin-top: 30rpx;

				.select-options-one {
					width: 630rpx;
					background: #F7F8FA;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					opacity: 1;
					margin-bottom: 20rpx;
					text-align: left;
					line-height: 33rpx;
					padding: 30rpx;
					box-sizing: border-box;

				}

				.btned {
					background: #F2BD0A;
					color: #FFFFFF;
				}

				.dui {
					background: #4B73EA;
					color: #FFFFFF;
				}

				.wrong {
					background: #CA1313;
					color: #FFFFFF;
				}
			}

			.select-options-s {
				width: 630rpx;
				height: 800rpx;
				background-color: #F7F8FA;
				position: absolute;
				top: 250rpx;
				z-index: 9999;
				opacity: 0.2;
			}


		}

		.selectBtns {
			width: 690rpx;
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: fixed;
			bottom: 40rpx;
			z-index: 99;

			.topicNum {
				display: flex;
				align-items: center;
			}

			.btns {
				width: 240rpx;
				height: 80rpx;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				opacity: 1;
				font-size: 30rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}


			.challenge-top-img-item {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.lastBtn {
			background: linear-gradient(135deg, #F3B96D 0%, #FF5D29 100%);
		}

		.confirmN {
			background: linear-gradient(1deg, #688EFA 0%, #466EE7 100%);
		}

		.confirmY {
			background: #96B1FF;
		}


		.footer {
			width: 750rpx;
			height: 324rpx;
			position: fixed;
			bottom: 0;
			left: 0;

			.footerimg {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
